<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue'
    import { useRoute } from 'vue-router';
    import { api } from '@/services/api';
    import { UserInfo } from '@/services/type';

    import User from "@/views/Main/User/index.vue";
    import RenderTab from "@/views/Main/User/Home/Render/index.vue";

    // 用户信息
    const userInfo = ref<Partial<UserInfo>>({});

    const route = useRoute();

    const activeName = ref('article_tab')
    // 用户内码
    const yhnm = ref(route.params.userId);

    const tabData = reactive([{
        label: "文章",
        name: "article_tab"
    },{
        label: "收藏",
        name: "collect_tab"
    },{
        label: "评论",
        name: "comment_tab"
    },{
        label: "关注",
        name: "follow_tab"
    }]);

    onMounted(async () => {
        if(window.location.hash) {
            activeName.value = window.location.hash.replace('#', '');
        }
        // 通过用户内码查询用户信息
        const response = await api.user.getUserInfo({ yhnm: yhnm.value });
        // 查询成功
        if(response.code === 0) {
            // 结果赋值
            userInfo.value = response.data;
        }
        
    });

</script>
<template>
    <user :type="2" :userInfo="userInfo">
        <!-- 个人主页 -->
        <section class="author-tab">
            <el-tabs v-model="activeName">
                <el-tab-pane 
                    v-for="(item, index) in tabData" 
                    :key="index" 
                    :label="item.label" 
                    :name="item.name"
                >
                </el-tab-pane>
                <render-tab :type="activeName" :yhnm="yhnm.toString()" />
            </el-tabs>
        </section>
    </user>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" />